/**
 * Created by imac13 on 19/1/3.
 */
import React, { Component } from 'react';
import {Row,Col,Badge} from 'antd';
import Util from './../../utils/utils';
import axios from './../../axios';
import './index.less';

class Header extends Component {
    state={
        uerename:'梦云小仙女'
    };
    componentWillMount () {
        setInterval(()=>{
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        },1000);
        this.getWeatherAPIData()
    }
    getWeatherAPIData(){
        let city = "合肥";
        axios.jsonp({
            url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
        }).then((res)=>{
            if (res.status == 'success'){
                let data = res.results[0].weather_data[0];
                this.setState({
                    dayPicUrl:data.dayPictureUrl,
                    weather:data.weather
                })
            }
        })
    }
    render() {
        const menuType = this.props.menuType;
        return (
            <div className="header">
                <Row className="header-top">
                    {
                        menuType?
                            <Col span={6} className="logo">
                                <img src="/assets/logo-ant.svg" alt=""/>
                                <span>IMooc 通用管理系统</span>
                            </Col>:''
                    }
                    <Col span={menuType?18:24}>
                        <Badge dot={true}>
                            <span>欢迎，{this.state.uerename}</span>
                        </Badge>
                        <a href="#">退出</a>
                    </Col>
                </Row>
                {
                    menuType ? '' :
                        <Row className="header-bottom">
                            <Col span={4} className="title">
                                <span>首页</span>
                            </Col>
                            <Col span={20} className="desc">
                                <span className="time">{this.state.sysTime}</span>
                                <span className="weather-img">
                            <img src={this.state.dayPicUrl} alt=""/>
                        </span>
                                <span className="weather-desc">{this.state.weather}</span>
                            </Col>
                        </Row>
                }

            </div>
        );
    }
}

export default Header;
